<template>
  <div>
    <!-- 居中 -->
    <h3 style="text-align: center">登录</h3>
    <div style="text-align: center">
      <input
        type="tel"
        id="phone"
        v-model="tel"
        required
        placeholder="请输入账号"
      />
    </div>

    <div style="text-align: center; margin-top: 20px">
      <input type="text" v-model="password" placeholder="请输入密码" />
    </div>
    <div style="text-align: center; margin-top: 20px">
      <button
        @click="login"
        style="margin-top: 20px; background-color: #ffff; border: 0px"
      >
        登录
      </button>
    </div>
    <div
      @click="router.push('/login/dx')"
      style="
      
        text-align: center;
        margin-top: 10px;
        font-size: small;
        color: darkgrey;
      "
    >
      手机号登录
    </div>
  </div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import axios, { fetchData } from "../../utils/request";
import { useRouter } from "vue-router";
const router = useRouter();

let tel = ref();
let password = ref("");
let msg = ref("");

const getProfile = async () => {
  const data = await fetchData("/profile");

  msg.value = data;
};

const login = async () => {
  if (tel.value || password.value) {
    const res = await axios.post("/login", {
      tel: tel.value,
      password: password.value,
    });

    localStorage.setItem("_id", res.data.ss[0]._id);
    localStorage.setItem("img", res.data.ss[0].img);
   router.push("/trends");
  }


};

onMounted(() => {
  getProfile();
});
</script>

<style lang="scss" scoped></style>
